﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageRoll.aspx.cs" Inherits="Sample_ImageRoll" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery全屏banner自动轮播切换</title>
    <script src="/Scripts/jq/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function banner() {
            var bn_id = 0;
            var bn_id2 = 1;
            var speed33 = 5000;
            var qhjg = 1;
            var MyMar33;
            $("#banner .d1").hide();
            $("#banner .d1").eq(0).fadeIn("slow");
            if ($("#banner .d1").length > 1) {
                $("#banner_id li").eq(0).addClass("nuw");
                function Marquee33() {
                    bn_id2 = bn_id + 1;
                    if (bn_id2 > $("#banner .d1").length - 1) {
                        bn_id2 = 0;
                    }
                    $("#banner .d1").eq(bn_id).css("z-index", "2");
                    $("#banner .d1").eq(bn_id2).css("z-index", "1");
                    $("#banner .d1").eq(bn_id2).show();
                    $("#banner .d1").eq(bn_id).fadeOut("slow");
                    $("#banner_id li").removeClass("nuw");
                    $("#banner_id li").eq(bn_id2).addClass("nuw");
                    bn_id = bn_id2;
                };
                MyMar33 = setInterval(Marquee33, speed33);
                $("#banner_id li").click(function () {
                    var bn_id3 = $("#banner_id li").index(this);
                    if (bn_id3 != bn_id && qhjg == 1) {
                        qhjg = 0;
                        $("#banner .d1").eq(bn_id).css("z-index", "2");
                        $("#banner .d1").eq(bn_id3).css("z-index", "1");
                        $("#banner .d1").eq(bn_id3).show();
                        $("#banner .d1").eq(bn_id).fadeOut("slow", function () { qhjg = 1; });
                        $("#banner_id li").removeClass("nuw");
                        $("#banner_id li").eq(bn_id3).addClass("nuw");
                        bn_id = bn_id3;
                    }
                })
                $("#banner_id").hover(
		function () {
		    clearInterval(MyMar33);
		}
		,
		function () {
		    MyMar33 = setInterval(Marquee33, speed33);
		}
	)
            }
            else {
                $("#banner_id").hide();
            }
        }
    </script>
</head>
<body>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a, img
        {
            border: 0;
        }
        body
        {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }
        .banner
        {
            width: 400px;
            height: 400px;
            overflow: hidden;
        }
        .banner .d1
        {
            width: 100%;
            height: 400px;
            display: block;
        }
        .banner .d2
        {
            z-index: 100;
            top: 380px;
            position:absolute;
        }
        
        .banner .d2 ul
        {
            position:relative;
           border:solid 1px blue;
           z-index:101;
           left:160px;
           
        }
        .banner .d2 li
        {
            width: 17px;
            height: 15px;
            overflow: hidden;
            cursor: pointer;
            background: url(/App_Themes/Suda/Images/img1.png) no-repeat center;
            float: left;
            margin: 0 3px;
            display: block;
        }
        .banner .d2 li.nuw
        {
            background: url(/App_Themes/Suda/Images/img1_1.png) no-repeat center;
        }
    </style>
    <div style="padding-left:100px;border:solid 1px red;width:400px;">
        <div class="banner" id="banner">
            <div>
                <a href="#" class="d1">
                    <img src="/App_Themes/Suda/Adv/cetie.jpg" hidefocus="hidefocus" height="400px" width="400px" />
                </a><a href="#" class="d1">
                    <img src="/App_Themes/Suda/Adv/chip.png" hidefocus="hidefocus" height="400px" width="400px" />
                </a><a href="#" class="d1">
                    <img src="/App_Themes/Suda/Adv/dsp.jpg" hidefocus="hidefocus" height="400px" width="400px" />
                </a><a href="#" class="d1">
                    <img src="/App_Themes/Suda/Adv/wave3d.gif" hidefocus="hidefocus" height="400px" width="400px" />
                </a>
            </div>
            <div class="d2" id="banner_id">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">        banner()</script>
    <div style="text-align: center; clear: both">
    </div>
    <p style="float: left; width: 100px;">
        这个是第1列，</p>
    <p style="float: left; width: 400px;">
        这个是第2列，</p>
    <p style="clear: both;">
        这个是列的下面。</p>
</body>
</html>
